import React, { PropTypes } from 'react'
import { Form, Input, Modal, Steps } from 'antd'
const FormItem = Form.Item;
import gettime from '../../utils/time'
import request from '../../utils/request'

const Step = Steps.Step;

const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 14
  }
}



const modal = ({
  visible,
  type,
  item = {},
  onOk,
  onCancel,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue
  }
}) => {
  function handleCancel(){
    const status =(String) (parseInt(item.Current) - 2 );

    const data = {
      ...getFieldsValue(),
      Status : "-:" + status,
      Userid : localStorage.getItem('UserId'),
      Createtime : gettime()
    };
    data['Cost'] = parseInt(data['Cost']);
    data['Userid'] = parseInt(data['Userid']);
    if(data['Status'] === '1' || data['Status'] === '0' )
      onOk(data)
    onCancel()
  }

  function handleOk () {
    validateFields((errors) => {
      if (errors) {
        return
      }

      const status =(String) (type === 'create' ? '0' : parseInt(item.Current) );

      const data = {
        ...getFieldsValue(),
        Status : "+:" + status,
        Userid : localStorage.getItem('UserId'),
        Createtime : gettime()
      };

      data['Cost'] = parseInt(data['Cost']);
      data['Userid'] = parseInt(data['Userid']);
      /*if(data['Status'] === '1' || data['Status'] === '0' )*/
        onOk(data)
    })
  }

  request('http://192.168.1.115:8888/v1/dockingwork_timeline/?query=parentid:23', {
    method : 'get'
  }).then(res =>{
    localStorage.setItem('Createtime1', res[0] ? res[0]['Createtime'] : '');
    localStorage.setItem('Createtime2', res[1] ? res[1]['Createtime'] : '');
    localStorage.setItem('Createtime3', res[2] ? res[2]['Createtime'] : '');
  });

  if(type === 'create'){
     item['hidden1'] = 'hidden';
     item['hidden2'] = '';
    item['Button1'] = '提交';
    item['Button2'] = '取消';
  } else {
     item['hidden1'] = '';
     item['hidden2'] = 'hidden';
    item['Button1'] = '通过';
    item['Button2'] = '驳回';

  }

  console.log(item['Button1']);

  const modalOpts = {
    title: `${type === 'create' ? '新建' : '详情'}`,
    visible,
    onOk: handleOk,
    onCancel:handleCancel,
    wrapClassName: 'vertical-center-modal'
  };

  return (


    <Modal {...modalOpts}
           okText={item.Button1}
           cancelText={item.Button2}
    >
      <div hidden={item.hidden1}>
        <Steps current={item.Current} status="In Progress">
          <Step title="提交" description={localStorage.getItem('Createtime1') || ''} />
          <Step title="审核" description={localStorage.getItem('Createtime2') || ''} />
          <Step title="完成" description={localStorage.getItem('Createtime3') || ''} />
        </Steps>
      </div>

      <div hidden={item.hidden2}>
        <Form horizontal>
          <FormItem label='费用：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('Cost', {
              initialValue: item.Cost,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                }
              ]
            })(<Input />)}
          </FormItem>
          <FormItem label='备注：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('Note', {
              initialValue: item.Note,
              rules: []
            })(<Input />)}
          </FormItem>
        </Form>
      </div>


        {/*<FormItem label='姓名：' hasFeedback {...formItemLayout}>
          {getFieldDecorator('name', {
            initialValue: item.name,
            rules: [
              {
                required: true,
                message: '姓名未填写'
              }
            ]
          })(<Input />)}
        </FormItem>
        <FormItem label='昵称：' hasFeedback {...formItemLayout}>
          {getFieldDecorator('nickName', {
            initialValue: item.nickName,
            rules: [
              {
                required: true,
                message: '昵称未填写'
              }
            ]
          })(<Input />)}
        </FormItem>
        <FormItem label='性别' hasFeedback {...formItemLayout}>
          {getFieldDecorator('isMale', {
            initialValue: item.isMale,
            rules: [
              {
                required: true,
                type: 'boolean',
                message: '请选择性别'
              }
            ]
          })(
            <Radio.Group>
              <Radio value>男</Radio>
              <Radio value={false}>女</Radio>
            </Radio.Group>
          )}
        </FormItem>
        <FormItem label='年龄：' hasFeedback {...formItemLayout}>
          {getFieldDecorator('age', {
            initialValue: item.age,
            rules: [
              {
                required: true,
                type: 'number',
                message: '年龄未填写'
              }
            ]
          })(<InputNumber min={18} max={100} />)}
        </FormItem>
        <FormItem label='电话：' hasFeedback {...formItemLayout}>
          {getFieldDecorator('phone', {
            initialValue: item.phone,
            rules: [
              {
                required: true,
                message: '不能为空'
              }
            ]
          })(<Input />)}
        </FormItem>
        <FormItem label='邮箱：' hasFeedback {...formItemLayout}>
          {getFieldDecorator('email', {
            initialValue: item.email,
            rules: [
              {
                required: true,
                message: '不能为空'
              }
            ]
          })(<Input />)}
        </FormItem>
        <FormItem label='住址：' hasFeedback {...formItemLayout}>
          {getFieldDecorator('address', {
            initialValue: item.address,
            rules: [
              {
                required: true,
                message: '不能为空'
              }
            ]
          })(<Input />)}
        </FormItem>*/}
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  visible: PropTypes.bool,
  type: PropTypes.string,
  item: PropTypes.object
}

export default Form.create()(modal)
